<template>
  <div class="qrcode">
    <img class="close_btn" src="./image/close.png" alt @click="close" />

    <div class="content">
      <div class="wenwu-image">
        <div class="wenwu-wrap">
          <img src="./image/wenwu.png" class="wenwu-con" />
        </div>
      </div>
      <!-- line -->
      <div class="line"></div>

      <!-- 文字说明 -->
      <div class="txt-dec-wrap">
        <div class="dec-title">{{wenwu.title}}</div>
        <!-- <div class="dec-second"></div> -->
        <div class="dec-content">{{wenwu.content}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Qrcode",
  props:{
      wenwu:{
          title:String,
          content:String
      }
  },
  data(){
      return{}
  },
  methods: {
    close() {
      this.$emit("closeorder", false);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../static/styles/mixin.scss";
.qrcode {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 4000;
  background: rgba(0, 0, 0, 0.8);
  .close_btn {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;
  }
  .content {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 5%;
    display: flex;
    align-items: center;
    .wenwu-image {
      width: 35%;
      text-align: center;
      .wenwu-con {
        width: 70%;
      }
    }
    .line {
      width: 3px;
      height: 87%;
      background: #ffffff;
      opacity: 0.8;
    }
    .txt-dec-wrap {
      width: 60%;
      margin-left: 5%;
      .dec-title {
        width: 70%;
        font-size: 0.25rem;
        color: #ffffff;
        font-weight: 500;
      }
      .dec-content {
        width: 70%;
        margin-top: 3%;
        font-size: 0.18rem;
        color: #ffffff;
        line-height: 0.25rem;
      }
    }
  }
}

// .qrcode_img {
//   width: 200px;
//   height: 200px;
//   position: absolute;
//   top: 50%;
//   left: 50%;
//   margin-left: -100px;
//   margin-top: -100px;
// }
</style>

